<template>
  <view class="cart">
    <!-- 1 列表 -->
    <view class="cart-list">
      <view class="cart-item"  v-for="(item,index) in cartList" :key="item.goods_id">
        <!-- 1 复选框 -->
        <view class="goods-chk">
          <u-checkbox
            :value="item.checked"
            shape="circle"
            active-color="red"
            @change="handleItemCheck(index)"
          ></u-checkbox>
        </view>
        <!-- 2 图片 -->
        <view class="goods-img">
          <u-image
            width="191rpx"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 3 信息 -->
        <view class="goods-info">
          <!-- 名称 -->
          <view class="goods-name u-line-2">{{item.goods_name}}</view>
          <!-- 价格和数量 -->
          <view class="goods-price-num">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="goods-num-tool">
              <view class="num-btn" @click="handleNumUpdate(-1,index)">-</view>
              <view class="goods-vnum">{{item.nums}}</view>
              <view class="num-btn"  @click="handleNumUpdate(1,index)">+</view>
            </view>
          </view>
        </view>
      </view>
       </view>
    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-chk">
        <u-checkbox
          :value="allChecked"
          shape="circle"
          active-color="red"
          @change="handleAllCheck"
        >全选</u-checkbox>
      </view>
         <view class="all-price">
        合计: <text>￥{{checedkPrice}}</text>
      </view>
          <view class="all-count">
        <u-button
          type="error"
          shape="circle"
          @click="handleGoPay"
        >去结算({{checkedCount}})</u-button>
      </view>
    </view>
     </view>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
computed:{
  ...mapState({
    cartList:(state)=>state.cart.cartList
  }),
  // 全选
  allChecked(){
    // 要求 购物车数组 每一种商品都选中 选中=全选
    return (
      this.cartList.length &&this.cartList.every((item)=>item.checked)
    )
  },
  // 统计 购买的数量
  checkedCount(){
let count=0
this.cartList.forEach(item=>{
  if(item.checked){
    count+=item.nums
  }
})
return count
  },
  // 统计购买的总金额
  checedkPrice(){
    let price=0
    this.cartList.forEach(item => {
      if(item.checked){
        price+=item.nums*item.goods_price
      }
    });
    return price
  }
  },
methods:{
  ...mapMutations([
    //  商品的选中 取反功能
    "cart/cartGoodsChecked",
    // 数量编辑
    "cart/cartGoodsNumUpdate",
    // 删除数组中的某个元素
    "cart/cartGoodsRemove",
    //修改所有商品的选中状态
      "cart/cartAllGoodsChecked",
    ]),

  // 商品的选中功能
handleItemCheck(index){
  // 数据存放在vuex中
  this["cart/cartGoodsChecked"]({index})
},

// 数量编辑 - || +
async handleNumUpdate(unit,index){
// 判断用户是否想要删除 当前的数量 和点击'-'
if(this.cartList[index].nums===1&& unit === -1){
  // 弹窗 确认框 是否想要删除
   const [err, result] = await uni.showModal({
          title: "提示",
          content: "您是否想要删除",
          showCancel: true,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
        });
        if(result.confirm){
          // 想要删除
          this["cart/cartGoodsRemove"]({index})
        }else{
          
        }
}else{
  this['cart/cartGoodsNumUpdate']({unit,index})
}
},

// 点击全选控制单选
handleAllCheck(){
// 获取到当前的全选按钮 选中按钮 取反
const allChecked=!this.allChecked
// 把全选状态 传递过去 挨个修改数组元素 checked
this["cart/cartAllGoodsChecked"]({checked:allChecked})
},

// 点击跳转页面
handleGoPay(){
// 判断当前有没有商品选中 通过数据结算的数量
if(this.checkedCount===0){
  // 没有选中商品
  uni.showToast({
    title:'您还没有选中商品',
    icon:'none'

  })
}else{
  console.log("跳转页面");
  uni.navigateTo({
    url:"/pages/pay/pay"
  })
}
}
}
}
</script>

<style lang="scss">
.cart {
  padding-bottom: 111rpx;
  .cart-list {
    .cart-item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;
      .goods-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-img {
        flex: 2;

        display: flex;
        align-items: center;
        justify-content: center;
      }

      .goods-info {
        color: #666;
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
        }

        .goods-price-num {
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $themeColor;
          }

          .goods-num-tool {
            width: 140rpx;
            height: 40rpx;

            display: flex;
            justify-content: space-between;
            .num-btn {
              border: 1rpx solid #ccc;
              border-radius: 50%;
              width: 40rpx;
              height: 40rpx;
              text-align: center;
              line-height: 40rpx;
            }

            .goods-vnum {
            }
          }
        }
      }
    }
  }
  .statistics {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-top: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    padding: 15rpx;
    .all-chk {
    }

    .all-price {
      flex: 1;
      color: #666;
      text {
      }
    }

    .all-count {
    }
  }
}
</style>